<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>site-avg</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.css">

</head>
<body>
<div class="container">
    <a class="btn btn-light" href="/">index</a>
    <select name="pageSize" id="pageSize" th:attr="pageNum=${pageInfo.pageNum}">
        <option th:selected="${pageSize == 10}" value="10">10</option>
        <option th:selected="${pageSize == 20}" value="20">20</option>
        <option th:selected="${pageSize == 30}" value="30">30</option>
        <option th:selected="${pageSize == 50}" value="50">50</option>
    </select>
    <table class="table">
        <thead class="thead-dark">
        <tr>
            <td>month</td>
            <td>site-name</td>
            <td>col1-avg</td>
            <td>col2-avg</td>
            <td>col3-avg</td>
        </tr>
        </thead>
        <tbody id="info-body">
        <tr th:each="item : ${pageInfo.list}">
            <td th:text="${item.months}"></td>
            <td th:text="${item.siteName}"></td>
            <td th:text="${item.col1Avg}"></td>
            <td th:text="${item.col2Avg}"></td>
            <td th:text="${item.col3Avg}"></td>
        </tr>
        </tbody>
    </table>
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary" id="firstPage"
                th:disabled="${1==pageInfo.pageNum}">首页
        </button>
        <button type="button" class="btn btn-secondary" id="prePage"
                th:disabled="${!pageInfo.hasPreviousPage}" th:attr="prePage=${pageInfo.prePage}">上一页
        </button>
        <button type="button" class="btn btn-secondary"
                th:text="${pageInfo.pageNum}+'/'+${pageInfo.pages}"></button>
        <button type="button" class="btn btn-secondary"
                th:text="'总页数'+${pageInfo.total}"></button>
        <button type="button" class="btn btn-secondary" id="nextPage"
                th:disabled="${!pageInfo.hasNextPage}" th:attr="nextPage=${pageInfo.nextPage}">下一页
        </button>

        <button type="button" class="btn btn-secondary" id="lastPage"
                th:disabled="${pageInfo.pageNum == pageInfo.pages}"
                th:attr="pages=${pageInfo.pages}">尾页
        </button>
    </div>
</div>


<script type="application/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
<script>
    $(function () {
        let $pageSize = $("#pageSize");


        $pageSize.on('change', function () {
            window.location.href = '/checktime/siteavg?pageNum='
                + 1 + '&pageSize=' + $pageSize.val();
        });

        $("#prePage").on('click', function () {
            var prePageVal = $(this).attr('prePage');
            window.location.href = '/checktime/siteavg?pageNum='
                + prePageVal + '&pageSize=' + $pageSize.val();
        })

        $("#firstPage").on('click', function () {
            window.location.href = '/checktime/siteavg' +
                '?pageNum=' + 1 + '&pageSize=' + $pageSize.val();
        })

        $("#lastPage").on('click', function () {
            let pagesVal = $(this).attr('pages');
            window.location.href = '/checktime/siteavg' +
                '?pageNum=' + pagesVal + '&pageSize=' + $pageSize.val();
        })

        $("#nextPage").on('click', function () {
            var nextPageVal = $(this).attr('nextPage');
            window.location.href = '/checktime/siteavg?pageNum='
                + nextPageVal + '&pageSize=' + $pageSize.val();
        })

    })
</script>
</body>
</html>